<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<jsp:include page="menu.jsp"></jsp:include>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
		<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			function check(){
				let username = $("#username").val();
				if(username!=""){
					$.post(
						"checkusername",
						{
							"name":username
						},
						function(res) {
						    var colorClass;
						    if (res === "恭喜，此用户名可用！") {
						        colorClass = "text-success"; // 成功时设置为绿色
						    } else {
						        colorClass = "text-prohibit"; // 已经注册设置为红色
						    }

						    // 将res的值设置到.note元素中，并赋予相应的颜色类
						    $(".note").html("<span class='" + colorClass + "'>" + res + "</span>");
						}
					)
				}
			}
			
			function reload(cn){
				if(cn=="cn"){
					$("#captcha").attr("src","image?cn=yes&time="+new Date().getTime());
				}else{
					$("#captcha").attr("src","image?time="+new Date().getTime());
				}
				
			}
		</script>
	<style type="text/css">
		body {
   	 		background-image: url("img/background.png");
    		background-size: cover;
    		font-family: "Noto Sans SC", sans-serif;
		}
		.text-success {
   		   color: green;
		}
		.text-prohibit {
 	 	  color: red;
		}
	</style>
	</head>
	<body>
		<div style="height: 100px"></div>
		<form action="regist" method="post" class="f2">
			<div style="height: 30px"></div>
			<h2 class="title">新用户注册</h2>
			<table class="ta">
				<tr>
					<td>用户名</td>
					<td>
						<input type="text" name="username" id="username" onchange="check()" placeholder="取一个响亮的名字吧！"/>
					</td>
					<td><span class="note"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<input type="password" name="password" placeholder="请输入您的密码"/>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>Email</td>
					<td>
						<input type="text" name="email" placeholder="请输入您的邮箱"/>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>性别</td>
					<td colspan="2" align="left">
						<input type="radio"  value="1" name="sex" checked="checked"/>男
						<input type="radio"  value="0" name="sex"/>女
					</td>
				</tr>
				<tr>
					<td>关注类型</td>
					<td colspan="2">
						<input type="checkbox"  value="法律规定" name="type" checked="checked"/>法律规定
						<input type="checkbox"  value="管理办法" name="type"/>管理办法
						<input type="checkbox"  value="决定条例" name="type"/>决定条例
						<input type="checkbox"  value="细则解释" name="type"/>细则解释
						<input type="checkbox"  value="规范指南" name="type"/>规范指南
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="captcha" placeholder="请输入验证码"/>
					</td>
					<td>
						<img id="captcha" alt="验证码加载失败" title="看不清，换一张试试？" src="image" style="cursor: pointer;" onclick="reload()">
						<a href="#" title="看不懂英文，试试中文验证码？" onclick="reload('cn')">中文验证码</a>
					</td>
				</tr>
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit"  value="注册" class="sub1" title="点击注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
